import React, { useState } from 'react'
import './Intelligentdesign.scss'
// import Collectingscenes1 from '../../../assets/images/Collectingscenes/1.webp'
import Collectingscenes2 from '../../../assets/images/Collectingscenes/2.webp'
// import Collectingscenes3 from '../../../assets/images/Collectingscenes/3.webp'
// import Collectingscenes4 from '../../../assets/images/Collectingscenes/4.webp'
// import Collectingscenes5 from '../../../assets/images/Collectingscenes/5.webp'
// import Collectingscenes6 from '../../../assets/images/Collectingscenes/6.webp'
// import Collectingscenes7 from '../../../assets/images/Collectingscenes/7.webp'
// import Collectingscenes8 from '../../../assets/images/Collectingscenes/8.webp'
// import Collectingscenes9 from '../../../assets/images/Collectingscenes/9.webp'
// import Collectingscenes10 from '../../../assets/images/Collectingscenes/10.webp'
// import Collectingscenes11 from '../../../assets/images/Collectingscenes/11.webp'
// import Collectingscenes12 from '../../../assets/images/Collectingscenes/12.webp'
// import Collectingscenes13 from '../../../assets/images/Collectingscenes/13.webp'
// import Collectingscenes14 from '../../../assets/images/Collectingscenes/14.webp'
// import Collectingscenes15 from '../../../assets/images/Collectingscenes/15.webp'
function Intelligentdesign() {
  const [offset, setOffset] = useState(0);
const renderScenes = Array(12).fill(null).map((_, index) => (
    <li key={index}>
      <img src={Collectingscenes2} alt="" />
      <div className='Solartermelements'>
        <h4>中秋晒图</h4>
      </div>
      <div className='overlay'>
        <img src="https://beta.chuangkit.com/distsaas/img/favorite-active.680145be.svg" alt="" className='img'/>
        <img src="https://pub-cdn-oss.chuangkit.com/designKind/502?v=1726647366269&imageMogr2%2Fformat%2Fwebp" alt="" className='img1'/>
        <img src="https://beta.chuangkit.com/distsaas/img/search-template-icon.d572a3bc.svg" alt="" className='img2'/>
        <div className='overlayleft'></div>
        <div className='overlayright'></div>
        <div className='overlayright1'></div>
      </div>
    </li>
  ));
  const handleNext = () => {
    if (offset > -1100) {
      setOffset(offset - 1100);
    }
  };

  const handlePrev = () => {
    if (offset < 0) {
      setOffset(offset + 1100);
    }
  };
  return (
      <div className='Collectingscenes'>
        <h2>智能设计</h2>
        <div
          className={`arrow left ${offset === 0 ? 'hidden' : ''}`}
          onClick={handlePrev}
        >
          &lt;
        </div>
        <div
          className={`arrow right ${offset <= -1100 ? 'hidden' : ''}`}
          onClick={handleNext}
        >
          &gt;
        </div>
        <ul className='Summerul' style={{ transform: `translateX(${offset}px)` }}>
          {
            renderScenes
          }
        </ul>

      </div>
  )
}

export default Intelligentdesign
